<template>
  <div class="login" v-loading="loading">
    <!-- <img src="../assets/loginBG.jpg" alt="" /> -->
    <div class="loginForm">
      <h1>HI~</h1>
      <h2 style="font-family: 'Times New Roman', Georgia, Serif">
        欢迎登录 "赊销订货-商家端"
      </h2>
      <div class="box">
        <el-tabs v-model="activateName" activate-name="1">
          <el-tab-pane label="商家登录" name="1">
            <el-form label-width="80px" :model="ruleForm" :rules="rules" ref="ruleForm" style="margin-top: 57px">
              <el-form-item label="账号:" prop="user">
                <el-input v-model="ruleForm.user" placeholder="账号" @keyup.enter.native="submit"></el-input>
              </el-form-item>
              <el-form-item label="密码:" prop="password">
                <el-input v-model="ruleForm.password" placeholder="密码" type="password"
                  @keyup.enter.native="submit"></el-input>
              </el-form-item>
              <div class="buttonBlock">
                <el-button class="formBtn" type="primary" round @click="submit">登 录</el-button>

              </div>
              <div class="Abtn"><a @click="ForgetPassword">忘记密码?</a></div>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- 忘记密码框 -->
    <el-dialog title="重置密码" :visible.sync="ForgetVisible">
      <el-form ref="ForgetPasswordForm" :model="ForgetPasswordForm" label-width="80px" :rules="ForgetPasswordRules">
        <el-form-item label="手机号" prop="Phone">
          <el-input v-model="ForgetPasswordForm.Phone" placeholder="手机号" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input v-model="ForgetPasswordForm.oldPassword" placeholder="旧密码(如忘记可不输入)" autocomplete="off"
            type="password"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="NewPwd">
          <el-input v-model="ForgetPasswordForm.NewPwd" placeholder="新密码" autocomplete="off" type="password"></el-input>
        </el-form-item>
        <el-form-item label="重复密码" prop="ConPwd">
          <el-input v-model="ForgetPasswordForm.ConPwd" placeholder="重复密码" autocomplete="off" type="password"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="SmsCode">
          <div class="formLabel">
            <el-input v-model="ForgetPasswordForm.SmsCode" placeholder="验证码" autocomplete="off"></el-input>

            <el-button type="primary" style="margin-left: 5px" :disabled="disabled" @click="sendCode">{{
              !disabled ? '发送验证码' : oneMinute + '重新发送'
            }}</el-button>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="ForgetVisible = false">取 消</el-button>
        <el-button type="primary" @click="ForgetConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
const regExp = new RegExp('^1[3456789]\\d{9}$') // 手机号正则
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ForgetPasswordForm.NewPwd) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      activateName: '1',
      ruleForm: {},
      rules: {
        user: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请输入账号'))
              } else if (!regExp.test(value)) {
                callback(new Error('请输入正确的手机号'))
              } else {
                callback()
              }
            },
            trigger: 'blur',
          },
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
      timer: null,
      oneMinute: 60,
      disabled: false,
      loading: false,
      ForgetVisible: false,
      ForgetPasswordForm: {},
      ForgetPasswordRules: {
        Phone: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请输入手机号'))
              } else if (!regExp.test(value)) {
                callback(new Error('请输入正确的手机号'))
              } else {
                callback()
              }
            },
            trigger: 'blur',
          },
        ],
        NewPwd: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
        ConPwd: [{ required: true, validator: validatePass, trigger: 'blur' }],
      },
    }
  },
  created() {
    sessionStorage.removeItem('token')
    sessionStorage.removeItem('userInfo')
  },
  mounted() {
    if (this.$route.query.Phone) {
      this.loading = true
      this.$http
        .post('/Base_Manage/Home/PhoneLogin', {
          userName: this.$route.query.Phone,
        })
        .then((res) => {
          this.loading = false
          if (res.Success) {
            sessionStorage.setItem('client', 'client')
            sessionStorage.setItem('token', res.Data)
            this.$router.replace('/information')
          } else {
            this.$message.error(res.Msg)
          }
        })
    }
  },
  methods: {
    // 忘记密码
    ForgetConfirm() {
      this.$refs['ForgetPasswordForm'].validate((valid) => {
        if (!valid) {
          return
        }
        if (!this.ForgetPasswordForm.SmsCode) {
          return this.$message.error('请填写验证码')
        }
        this.$http
          .post(
            `/Base_Manage/Base_User/SubResetUserPwd?Phone=${this.ForgetPasswordForm.Phone}&ConPwd=${this.ForgetPasswordForm.ConPwd}&SmsCode=${this.ForgetPasswordForm.SmsCode}`
          )
          .then((res) => {
            if (res.Success) {
              this.$message.success('密码重置成功,请登录')
              this.ForgetVisible = false
            } else {
              this.$message.error(res.Msg)
            }
          })
      })
    },
    ForgetPassword() {
      // 置空 自动获取手机号
      this.ForgetPasswordForm = {}
      if (this.$refs['ForgetPasswordForm'])
        this.$refs['ForgetPasswordForm'].clearValidate()
      if (this.ruleForm.user) {
        this.ForgetPasswordForm.Phone = this.ruleForm.user
      }
      this.ForgetVisible = true
    },
    sendCode() {
      this.$refs['ForgetPasswordForm'].validate((valid) => {
        if (!valid) {
          return
        }
        clearInterval(this.timer)
        this.disabled = true
        this.timer = setInterval(() => {
          this.oneMinute--
          if (this.oneMinute <= 0) {
            clearInterval(this.timer)
            this.oneMinute = 60
            this.disabled = false
          }
        }, 1000)
        this.$http
          .post('/Base_Manage/Base_User/ResetUserPwd', this.ForgetPasswordForm)
          .then((res) => {
            if (res.Success) {
              this.$message.success('验证码已经发送至您的手机,请注意查收')
            } else {
              this.$message.error(res.Msg)
            }
          })
      })
    },
    submit() {
      this.$refs['ruleForm'].validate((valid) => {
        if (!valid) {
          return
        }
        this.loading = true
        this.$http
          .post('/Base_Manage/Home/SubmitLogin', {
            userName: this.ruleForm.user,
            password: this.ruleForm.password,
          })
          .then((res) => {
            this.loading = false
            if (res.Success) {
              sessionStorage.setItem('token', res.Data)
              this.$router.replace('/information')
            } else {
              this.$message.error(res.Msg)
            }
          })
      })
    },
  },
}
</script>

<style lang="less" scoped>
/deep/.el-tabs__item {
  width: 235px;
  text-align: center;
  border-radius: 10px;
  font-size: 18px;
  line-height: 65px;
  height: 70px;
  font-weight: bold;
}

/deep/.el-tabs__item.is-active {
  color: #3362ec;
}

/deep/.el-tabs__active-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background-color: #3362ec;
  z-index: 1;
  transition: transform .3s cubic-bezier(.645, .045, .355, 1);
  list-style: none;
}

/deep/.el-button--primary {
  color: #fff;
  background-color: #3362ec;
  border-color: #3362ec;
}

.login {
  font-weight: bold;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  max-width: 1920px;
  max-height: 1080px;
  background-image: url('../assets/login.png');
  background-repeat: no-repeat;
  background-size: cover;

  .formLabel {
    display: flex;
  }

  .loginForm {
    width: 400px;
    height: 600px;
    margin-top: 155px;
    margin-left: 35.5%;

    .buttonBlock {
      position: relative;
      margin-top: 40px;
      text-align: center;
    }

    .Abtn a{
      color: #3362ec;
      float: right;
    }
    .formInput {
      margin: 7px 0;

      /deep/.el-input__inner {
        border-radius: 40px;
        // border-color: #888;
      }
    }

    .formBtn {
      font-weight: bold;
      font-size: 18px;
      width: 60%;
      display: inline-block;
      justify-content: center;
      margin: 0 auto;
    }
  }
}

.box {
  padding: 10px;
  background-color: white;
  box-shadow: 0px 5px 40px #7290e7;
  margin-top: 20px;
  margin: 50px auto 0px;
  width: 470px;
  height: 390px;
  border-radius: 20px;
}

#option {
  border-radius: 20px;
  margin-bottom: 40px;
  width: 92%;
  height: 88px;
  line-height: 40px;
  border-radius: 20px;
  margin-bottom: 40px;
}

#option li {
  float: left;
  text-align: center;
  width: 40%;
  /*background: white;*/
  height: 38px;
  cursor: pointer;
  color: #4f4f4f;
  font-size: 16px;
  border-radius: 20px;
  font-weight: bold;
  color: #ff0000;
}

#option li.active {
  background: linear-gradient(to left, #40e4e5, #28ccd6);
  color: white;
  border-radius: 20px;
}
</style>
